﻿@{
    ViewBag.Title = "商品详情";
    Layout = "~/Views/Shared/_HeadAndEnd.cshtml";
}

@using MvcShoppingMall.Model

<link href="~/Content/css/index.css" rel="stylesheet" />
<link href="~/Content/css/ziy.css" rel="stylesheet" />
<link href="~/Content/houl/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<link href="~/Content/houl/style.css" rel="stylesheet" />
<link href="~/Content/GoodsDatails/css/normalize.css" rel="stylesheet" />
<script src="~/Content/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="~/Content/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="~/Content/js/jquery.SuperSlide.2.1.1.source.js"></script>
<script type="text/javascript" src="~/Content/houl/jquery.fancybox-1.3.4.js"></script>
<script src="~/Content/GoodsDatails/js/common.js"></script>
<script src="~/Content/js/meiy/jquery-1.9.1.min.js"></script>
<style>
    .addbolor {
        border: 1px solid red;
    }
</style>

<!--搜索框-->
<div class="toub_beij">
    <div class="logo"><a href="./"><img src="~/Content/images/logo.png"></a></div>
    <div class="search">
        <input type="text" value="家电一折抢" class="text" id="textt">
        <button class="button">搜索</button>
    </div>
    <div class="right">
        <i class="gw-left"></i>
        <i class="gw-right"></i>
        <a href="@Url.Action("ShoppingCar", "Home")">我的购物车</a>
    </div>
    <div class="hotwords">
        <a class="biaoti">热门搜索：</a>
        <a href="###">新款连衣裙</a>
        <a href="###">四件套</a>
        <a href="###">潮流T恤</a>
        <a href="###">时尚女鞋</a>
        <a href="###">乐1</a>
        <a href="###">特步女鞋</a>
        <a href="###">威士忌</a>
    </div>
</div>

@{
    wst_shops shop = ViewBag.ShopList;
    wst_goods good = ViewBag.goods;
    List<goods_images> img = ViewBag.img;
    List<wst_goods> list = ViewBag.shopgood;
    List<GoodsColor> color = ViewBag.color;
    List<GoodsSize> size = ViewBag.size;
    List<wst_goods_appraises> Apprises = ViewBag.Apprises;
    List<string> userName = ViewBag.userName;
    List<string> userimage = ViewBag.userimage;
    List<string> ddcolor = ViewBag.ddcolor;
    List<string> ddsize = ViewBag.ddsize;
}

<!--导航栏-->
<div id="navv" class="navv_ziy">
    <div class="focus">
        <div class="focus-a">
            <div class="fouc-font fouc_font_ziy">
                <a href="###">全部商品分类</a>
            </div>
        </div>
        <div class="focus-b">
            <ul>
                <li><a href="@Url.Action("Index", "Home")">商城首页</a></li>
                <li><a href="###">本地生活</a></li>
                <li><a href="###">团购专区</a></li>
                <li><a href="###">积分商城 </a></li>
                <li><a href="###">分销系统</a></li>
                <li><a href="###">办公耗材</a></li>
                <li><a href="###">饰品礼品</a></li>
                <li><a href="###">休闲娱乐</a></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        var $subblock = $(".subpage"), $head = $subblock.find('h2'), $ul = $("#proinfo"), $lis = $ul.find("li"), inter = false;
        $head.mouseover(function (e) {
            e.stopPropagation();
            if (!inter) {
                $ul.show();
            } else {
                $ul.hide();
            }
            inter = !inter;
        });
        $ul.mouseover(function (event) {
            event.stopPropagation();
        });
        $(document).mouseover(function () {
            $ul.hide();
            inter = !inter;
        });
    })();
</script>

<!--图片商品详情-->
<div class="breadcrumbs_container">
    <div class="left_luj">
        <ul>
            <li>
                <a href="###" title="连衣裙">连衣裙</a>
                <i class="icon-crumbs-right"></i>
            </li>
            <li>
                <a href="@Url.Action("StoreIndex", "Store")" title="Mistletoe">@shop.shopName</a>
                <i class="icon-crumbs-right"></i>
            </li>
            <li class="active">
                <a href="###" title="@good.goodsName">@good.goodsName</a>
            </li>
        </ul>
    </div>
    <div class="right_dianp">
        <div class="ly-stores shops-name">
            <a class="btn-collect ">
                <i class="icon-collect"></i>
                <span>收藏店铺</span>
                <i class="icon-arrow"></i>
            </a>
            <a class="btn-service hide customerService_show">在线客服</a>
            <span class="services-score"><b class="star-gray"><i class="star-red" style="width:88.9059333333%"></i></b><em class="score">4.0</em>分</span>
            <a class="name" title="Mistletoe女装旗舰店" href="@Url.Action("StoreIndex", "Store")" target="_blank">

            </a>
        </div>
    </div>
</div>

<script>
    //鼠标悬浮切换图片
    $(function () {
        $(".wrapper >li>img").mouseover(function () {
            $(".small-box1 >img").attr("src", this.src);
        });
    });
</script>

<div class="gome_container">
    <!--左-->
    <div class="prd_firstscreen_left">
        <div id="magnifier">
            <div class="small-box1">
                <img src="~/Content/images/dyImg/@img[0].imgPath" height="480px" width="400px" alt="#">
                <span class="hover"></span>
            </div>
            <div class="thumbnail-box">
                <a href="javascript:;" class="btn btn-prev"></a>
                <a href="javascript:;" class="btn btn-next"></a>
                <div class="list">
                    <ul class="wrapper">
                        @foreach (var info in img)
                        {
                            <li class="item item-cur" data-src="~/Content/images/dyImg/@info.imgPath">
                                <img src="~/Content/images/dyImg/@info.imgPath" />
                            </li>
                        }
                    </ul>
                </div>
            </div>
            <div class="big-box">
                <img src="~/Content/images/dyImg/@good.goodsImg" alt="">
            </div>
        </div>
        <!--<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> -->
        <script src="~/Content/js/magnifier.js"></script>
        <script>
            $(function () {
                $('#magnifier').magnifier();
            });
        </script>

        <div class="preview-info">
            <div class="left-btns">
                <a class="share J-share" href="###">
                    <i class="sprite-share"></i><em>分享</em>
                </a>
                <a class="" href="###">
                    <i class="sprite-compare"></i><em>收藏商品（商品人气1500）</em>
                </a>
            </div>
            <div class="right-btns">
                <a class="report-btn" href="###">举报</a>
            </div>
        </div>
    </div>
    <!--中-->
    <form action="@Url.Action("GoodsDatails","Home")" method="post">
        <div class="prd_firstscreen_center">
            <div class="hgroup">
                <h1>@good.goodsName</h1>
            </div>
            <div class="prd_price_1">
                <div class="unitprice">
                    <p>
                        <label class="prd_price_left">原&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价</label>
                        <span class="price xiangq_yuanj"><em>¥</em>@good.shopPrice</span>
                    </p>
                    <p>
                        <label class="prd_price_left">促&nbsp;销&nbsp;价</label>
                        <span class="price"><em>¥</em>@good.shopPrice</span>
                    </p>
                </div>
                <div class="prd_price_flr">
                    <div class="prd_price_line">|</div>
                    <div class="prd_price_lineright">
                        <p>好评度<em id="haocnt">98%</em></p>
                        <p class="pincnt"><a href="###" class="reduce"><em>55</em>人评价</a></p>
                    </div>
                </div>
            </div>
            <div class="prd_properties">
                <div class="prd_properties_1">
                    <label class="prd_price_left">服&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务</label>
                    <span>由<a href="@Url.Action("StoreIndex", "Store")">@shop.shopName</a>发货并负责售后服务。</span>
                </div>
                <div class="prd-properties-2">
                    <div class="prd_properties_other">
                        <label class="prdLeft">颜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;色</label>
                        <div class="prdRight">
                            @foreach (var info in color)
                            {
                                <div class="prdcol">
                                    <a href="###" class="clickcolor">
                                        <span>@info.ColorName</span><i></i><input type="text" value="@info.ColorId" style="display:none" />
                                    </a>
                                </div>
                            }
                        </div>
                        <script>
                            $(function () {
                                var colorid = "";
                                var sizeid = "";
                                $("#submit").click(function () {
                                    var count = $("#text_box").val();
                                    $.post("@Url.Action("InsertBycard","Home")",
                                        { color: colorid, size: sizeid, count: count },
                                        function (data) {
                                            if (data == "ok") {
                                                alert("添加成功！");
                                            } else {
                                                alert("添加失败！")
                                            }
                                        }
                                        )
                                });
                                $(".prdcol").click(function () {
                                    colorid = +$(this).find("input").val();
                                    $(this).addClass("addbolor");
                                    $(this).siblings().removeClass("addbolor");
                                });
                                $(".prdmod").click(function () {
                                    sizeid = +$(this).find("input").val();
                                    $(this).addClass("addbolor");
                                    $(this).siblings().removeClass("addbolor");
                                });
                            });
                        </script>
                    </div>
                    <div class="prd_properties_other" style="display:block">
                        <label class="prdLeft">尺&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                        <div class="prdRight_1">
                            @foreach (var info in size)
                            {
                                <div class="prdmod">
                                    <a href="###" class="">@info.SizeName<i></i><input type="text" value="@info.SizeId" style="display:none" /></a>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
            <style type="text/css">
                .hou_jia {
                    padding: 0 10px;
                }

                .kuc_jian {
                    width: 100%;
                    line-height: 25px;
                }
            </style>
            <!--数量加减start-->
            <div class="prd_buttons">
                <script>
                    $(document).ready(function () {
                        var t = $("#text_box");
                        $('#min').attr('disabled', true);
                        $("#add").click(function () {
                            t.val(parseInt(t.val()) + 1)
                            if (parseInt(t.val()) != 1) {
                                $('#min').attr('disabled', false);
                            }
                        })
                        $("#min").click(function () {
                            t.val(parseInt(t.val()) - 1);
                            if (parseInt(t.val()) == 1) {
                                $('#min').attr('disabled', true);
                            }
                        })
                    });
                </script>
                <div class="gcIpt">
                    <span class="guT">数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量</span>
                    <input id="min" name="" type="button" value="-" />
                    <input id="text_box" name="num" type="text" value="1" style="width:30px; text-align: center; color: #0F0F0F;" />
                    <input id="add" name="" type="button" value="+" />
                    <span class="Hgt">库存（@(good.warnStock)）</span>
                </div>
                <div class="nobdr-btns" id="formType">
                    <button class="addcart hu" id="submit" type="button" value="gouwuche"><img src="~/Content/GoodsDatails/images/shop.png" width="25" height="25" />@Url.Action("加入购物车", "AddShopCar", "Home")</button>
                    <button class="addcart yh" type="button" value="goumai"><img src="~/Content/GoodsDatails/images/ht.png" width="25" height="25" />立即购买</button>
                </div>
            </div>
            <!--数量加减end-->
            <div class="prd-tips wenxintishi_wrap clearfix">
                <p>温馨提示</p>
                <ol class="wenxinti">
                    <li>
                        正品保障；
                        支持7天无理由退货
                    </li>
                </ol>
            </div>
        </div>
    </form>
    <!--右-->
    <div class="prd_firstscreen_right">
        <h2>看了又看</h2>
        <div class="multipleColumn" style="margin:0 auto">
            <div class="bd">
                <div class="tempWrap" style="overflow:hidden; position:relative; width:163px">
                    <div class="ulWrap" style="width: 815px; position: relative; overflow: hidden; padding: 0px; margin: 0px; left: -163px;">
                        <ul style="float: left; width: 163px;">
                            <li>
                                @*这个不能掉*@
                            </li>
                        </ul>
                        <ul style="float: left; width: 163px;">
                            @for (int i = 0; i < 3; i++)
                            {
                                <li>
                                    <div class="pic">
                                        <a href="###" target="_blank">
                                            <img src="~/Content/images/dyImg/@list[i].goodsImg" style="height:170px">
                                        </a>
                                    </div>
                                    <div class="title"><a href="###" target="_blank">￥@list[i].shopPrice</a></div>
                                </li>
                            }
                        </ul>
                    </div>
                </div><!-- ulWrap End -->
            </div><!-- bd End -->
        </div><!-- multipleColumn End -->
        <script type="text/javascript">
            jQuery(".multipleColumn").slide({ titCell: ".hd ul", mainCell: ".bd .ulWrap", autoPage: true, effect: "leftLoop", autoPlay: true, vis: 1 });
        </script>
    </div>
</div>

<!--文字商品详情-->
<div class="shangp_xiangq_neir_beij">
    <!--left-->
    <div class="shangp_xiangq_left">
        <div class="shangp_xiangq_left_biank">
            <div class="stores-infos">
                <div class="ly-stores">
                    <h2 class="fix-storesname shops-name" id="store_live800_wrap">
                        <a class="name" title="@shop.shopName" href="@Url.Action("StoreIndex", "Store")" target="_blank">@shop.shopName</a>
                    </h2>
                    <div class="services-wrapper">
                        <div class="services-stars">
                            服务评分：
                            <span class="star"><i style="width:81.2819333333%">星星</i></span>
                            <span class="score">4.0</span>分
                        </div>
                        <div class="services-score-detail">
                            <p><span class="detail">评分明细</span><span class="contrast">与行业对比</span></p>
                            <div class="describe ">
                                <p>商品描述：<span>4.15</span><small title="计算规则：（商家得分-同行业平均分）" class="diyu_text">9.93%</small><i class="diyu">箭头</i></p>
                            </div>
                            <div class="logistics">
                                <p>发货速度：<span>3.96</span><small title="计算规则：（商家得分-同行业平均分" class="diyu_text">15.34%</small><i class="diyu">箭头</i></p>
                            </div>
                            <div class="services">
                                <p>服务质量：<span>4.08</span><small title="计算规则：（商家得分-同行业平均分））" class="diyu_text">13.08%</small><i class="diyu">箭头</i></p>
                            </div>
                        </div>
                    </div>
                    <div class="btn-group">
                        <a href="@Url.Action("StoreIndex", "Store")" class="btn-product btn-enter" target="_blank"><i></i>进入店铺</a>
                        <a href="###" class="btn-collect"><i class="sprite-enter"></i>收藏店铺</a>
                    </div>
                </div>
            </div>
            <div class="dianp_xiao_jiej">
                <div class="shangj_diz">
                    <p>地址：<span>@shop.shopAddress</span></p>
                    <p>联系人：<span>@shop.shopkeeper</span></p>
                    <p>电话：<span>@shop.shopTel</span></p>
                    <p>营业时间：<span>@(shop.serviceStartTime)至@(shop.serviceEndTime)</span></p>
                </div>
                <div class="_xq_gogns_jianj">
                    <p>公司简介：</p>
                    <p class="_xq_gogns_jianj_neir">@shop.shopBrief</p>
                </div>
            </div>
        </div>
        <div class="shangp_xiangq_left_biank">
            <div class="stores-infos">
                <div class="ly-stores">
                    <h2 class="fix-storesname shops-name" id="store_live800_wrap">
                        <a class="name" title="本店商品" href="@Url.Action("StoreIndex", "Store")" target="_blank">本店商品</a>
                    </h2>
                    <ul class="bend_shangp_lieb">
                        @for (var i = 0; i < 4; i++)
                        {
                            <li>
                                <a href="@Url.Action("GoodsDatails", "Home")">
                                    <img src="~/Content/images/dyImg/@list[i].goodsImg" style="height:190px">
                                    <h3>￥@list[i].shopPrice</h3>
                                    <p>@list[i].goodsName</p>
                                </a>
                            </li>
                        }
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--right-->
    <div class="shangp_xiangq_right">
        <div class="slideTxtBox_1">
            <div class="hd">
                <ul><li class="on">商品介绍</li><li class="">售后保障</li><li class="">商品评价(500+)</li></ul>
                <div class="extra_jiar_gouw_c">
                    <a href="###">加入购物车</a>
                </div>
            </div>
            <div class="bd">
                <ul style="display: block;">
                    <div class="p_parameter">
                        <ol class="p_parameter_list">
                            <li title="卿城">品牌： <a href="###" target="_blank">@shop.shopName</a> </li>
                        </ol>
                        <ol class="parameter2 p_parameter_list">
                            <li title="@good.goodsName">商品名称：@good.goodsName</li>
                            <li title="11971841918">商品编号：@good.goodsSn</li>
                            <li title="@shop.shopName">店铺： <a href="###" target="_blank">@shop.shopName</a></li>
                            <li title="中国大陆">商品产地：中国大陆</li>
                            <li title="多色">颜色：多色</li>
                            <li title="棉质">材质：棉质</li>
                            <li title="秋季">季节：秋季</li>
                            <li title="M，L，XL，XXL">尺码：S , M，L，XL</li>
                        </ol>
                    </div>
                    <div class="detail_content_wrap">
                        <img src="~/Content/images/dyImg/@img[0].imgPath" />
                        <img src="~/Content/images/dyImg/@img[1].imgPath" />
                        <img src="~/Content/images/dyImg/@img[2].imgPath" />
                        <img src="~/Content/images/dyImg/@img[3].imgPath" />
                    </div>
                    <div class="shouh_baoz">
                        <div class="mt">
                            <h3>售后保障</h3>
                        </div>
                        <div class="mc">
                            <div class="item-detail item-detail-copyright">
                                <div class="serve-agree-bd">
                                    <dl>
                                        <dt>
                                            <i class="goods"></i>
                                            <strong>卖家服务</strong>
                                        </dt>
                                        <dd>
                                        </dd>
                                        <dt>
                                            <i class="goods"></i>
                                            <strong>正品行货</strong>
                                        </dt>
                                        <dd>
                                            全城优购卖家销售并发货的商品，由卖家提供发票和相应的售后服务。请您放心购买！<br>
                                            注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
                                        </dd>
                                    </dl>
                                </div>
                                <div id="state">
                                    <strong>权利声明：</strong><br>全城优购上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是京东重要的经营资源，未经许可，禁止非法转载使用。
                                    <p><b>注：</b>本站商品信息均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="shouh_baoz_2">
                        <div class="mt"><h3>商品评价</h3></div>
                        <div class="mc">
                            <div class="ETab">
                                <div class="tab-main small">
                                    <ol class="filter-list">
                                        <li class="current_xq" data-num="4900"><a href="###">全部评价</a></li>
                                    </ol>
                                    <div class="_extra_a">
                                        <div class="sort-select">
                                            <div class="current_tc"><span class="J-current-sortType"><a>推荐排序</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="J-current-sortType"><a>时间排序</a></span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab_con">
                            <ol class="replyListWrap">
                                @for (var i = 0; i < 5; i++)
                                {
                                    <li class="oh_de">
                                        <div class="reply-left">
                                            <p>时间：@Apprises[i].replyTime</p>
                                            <p><span>尺码：@ddsize[i] 码</span></p>
                                            <p><span>颜色：@ddcolor[i]</span></p>
                                        </div>
                                        <div class="reply-center">
                                            <p>评价：@Apprises[i].content</p>
                                        </div>
                                        <div class="reply-right">
                                            <div class="reply_avatar">
                                                <img src="~/Content/images/dyImg/@userimage[i]" />
                                                <span class="reply_avatar_userName">@userName[i]</span>
                                            </div>
                                        </div>
                                    </li>
                                }
                            </ol>
                            <div class="com-table-footer">
                                <div class="ui-page-wrap">
                                    <div class="ui-page">
                                        <a rel="1" class="ui-page-curr" href="###">1</a>
                                        <a rel="2" href="###">2</a>
                                        <span>...</span>
                                        <a rel="2" class="ui-pager-next" href="###">下一页</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
        <script type="text/javascript">jQuery(".slideTxtBox_1").slide({ trigger: "click" });</script>
    </div>
</div>